<template>
  <div class="ele-body aging">
    <el-card shadow="never" class="topCard">
      <div >平均服务用时</div>
      <div >目标：评估从“接收服务请求开始”到“服务结束”的工单履行的处理时间，以提高工单整体服务效率。</div>
      <div >含义：某个统计期间内，从接收到服务请求开始到工单完成的所有服务累计时间之和除以统计期间内完成的工单总数量。</div>
    </el-card>
    <el-card shadow="never">
      <!-- 搜索表单 -->
      <el-form ref="form" :model="queryForm" class="ele-form-search" label-width="77px" @keyup.enter.native="query"
               @submit.native.prevent>

        <el-row :gutter="15">
          <el-col :lg="6" :md="12">
            <el-form-item label="工单类型:">
              <el-select v-model="queryForm.work_order_type" placeholder="请选择">
                <el-option
                  v-for="item in options1"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :md="12">
            <el-form-item label="部门:" prop="department">
              <el-select v-model="queryForm.dept_id" placeholder="请选择部门">
                <el-option
                  v-for="item in options2"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :md="12">
            <el-form-item label="选择时间:" prop="date">
              <CustomDate :type.sync="queryForm.type" v-model="queryForm.date"/>
            </el-form-item>
          </el-col>
          <el-col :lg="6" :md="12">
            <div class="ele-form-actions">
              <el-button :loading="loading" class="ele-btn-icon" icon="el-icon-search" type="primary" @click="query">
                查询
              </el-button>
              <el-button  @click="reset">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="ele-body" shadow="never" v-loading="loading">
      <div class="content">
        <Echarts2 :data="histogramData"/>
      </div>
    </el-card>
  </div>
</template>
<script>
import CustomDate from "../components/CustomDate.vue"

import Echarts2 from "../components/Echarts2.vue"

export default {
  components: {CustomDate, Echarts2},
  data() {
    return {
      histogramData: {},
      loading:false,
      queryForm: {
        work_order_type: null,
        dept_id: null,
        date: [],
        type: null,
      },
      options1: [],
      options2: [],
    }
  },
  mounted() {
    this.query()
    this.handleQueryParams()
  },
  methods: {
    query() {
      let form = {...this.queryForm}
      delete form.date
      if (this.queryForm.date?.length) {
        form.month_start = this.queryForm.date[0]
        form.month_end = this.queryForm.date[1]
      }
      this.handleQueryHistogram(form)
    },
    reset() {
      this.$refs.form.resetFields()
      this.queryForm.type = null
      this.queryForm.orderworkType = null
      this.query()
    },
    async handleQueryHistogram(form) {
      this.loading = true
      const res = (await this.$http.get('/reports/avg_service_time', {params: form})).data
      res.success?this.histogramData = res.data.data:this.$message.error('res.msg')
      this.loading = false;
    },
    handleQueryParams() {
      this.$http.get('wos/params').then(res => {
          res.data.code === 0 ? this.options1 = res.data.data.wo_types : this.$message.error(res.data.msg);
        }
      )
      this.$http.get('dept/index').then(res => {
        res.data.code === 0 ? this.options2 = res.data.data : this.$message.error(res.data.msg);
      })
    },
  },
}
</script>

<style scoped lang="scss">
.aging {
  div:nth-child(2) {
    ::v-deep.el-card__body {
      padding-bottom: 0;
    }
  }
}
.topCard{
  ::v-deep div:not(:first-child){
    margin-top: 10px;
  }
  div:first-child{
    font-size: 16px;
    font-weight: 700;
    color: #262626
  }
}
</style>
